<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学员成果 - 家政小程序商学院</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f8f9fa;
            color: #333;
            max-width: 750px;
            margin: 0 auto;
        }
        .banner-container {
            height: 250px;
            overflow: hidden;
            position: relative;
        }
        .banner-slide {
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            position: absolute;
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        .banner-slide.active {
            opacity: 1;
        }
        .tab-item {
            transition: all 0.3s ease;
        }
        .tab-item.active {
            color: #4f46e5;
            border-bottom: 3px solid #4f46e5;
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .expand-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease;
        }
        .expand-content.expanded {
            max-height: 500px;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="bg-white shadow-sm sticky top-0 z-10 py-3 px-4 flex items-center justify-between">
        <button class="text-gray-600" onclick="window.history.back()">
            <i class="fas fa-chevron-left text-xl"></i>
        </button>
        <h1 class="text-xl font-bold text-gray-800">学员成果</h1>
        <div class="w-6"></div> <!-- 占位保持对称 -->
    </div>

    <!-- 轮播Banner -->
    <div class="banner-container rounded-lg mx-4 mt-4 shadow-md">
        <div class="banner-slide active" style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://s.coze.cn/image/XJipfWBhHHQ/')">
            <div class="absolute bottom-0 left-0 right-0 p-4 text-white">
                <h3 class="text-lg font-bold">优秀学员案例展示</h3>
                <p class="text-sm">2024年家政服务培训成果</p>
            </div>
        </div>
        <div class="banner-slide" style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://s.coze.cn/image/ThhNclDXv3s/')">
            <div class="absolute bottom-0 left-0 right-0 p-4 text-white">
                <h3 class="text-lg font-bold">就业率高达98%</h3>
                <p class="text-sm">学员平均薪资提升40%</p>
            </div>
        </div>
        <div class="banner-slide" style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://s.coze.cn/image/c0vegxAtexk/')">
            <div class="absolute bottom-0 left-0 right-0 p-4 text-white">
                <h3 class="text-lg font-bold">满意度96.5%</h3>
                <p class="text-sm">学员真实反馈</p>
            </div>
        </div>
        <div class="absolute bottom-4 right-4 flex space-x-2">
            <div class="w-2 h-2 rounded-full bg-white opacity-50 dot active"></div>
            <div class="w-2 h-2 rounded-full bg-white opacity-50 dot"></div>
            <div class="w-2 h-2 rounded-full bg-white opacity-50 dot"></div>
        </div>
    </div>

    <!-- 数据概览区 -->
    <div class="bg-white rounded-lg shadow-sm mx-4 mt-6 p-4">
        <h2 class="text-lg font-bold mb-4 text-gray-800">数据概览</h2>
        <div class="grid grid-cols-2 gap-4">
            <div class="bg-indigo-50 rounded-lg p-3 text-center">
                <p class="text-sm text-gray-600">学员满意度</p>
                <p class="text-2xl font-bold text-indigo-600">96.5%</p>
            </div>
            <div class="bg-purple-50 rounded-lg p-3 text-center">
                <p class="text-sm text-gray-600">就业率</p>
                <p class="text-2xl font-bold text-purple-600">98%</p>
            </div>
            <div class="bg-blue-50 rounded-lg p-3 text-center">
                <p class="text-sm text-gray-600">平均薪资提升</p>
                <p class="text-2xl font-bold text-blue-600">40%</p>
            </div>
            <div class="bg-green-50 rounded-lg p-3 text-center">
                <p class="text-sm text-gray-600">复训率</p>
                <p class="text-2xl font-bold text-green-600">85%</p>
            </div>
        </div>
    </div>

    <!-- 标签切换区 -->
    <div class="bg-white mt-6 mx-4 rounded-lg shadow-sm">
        <div class="flex border-b">
            <div class="tab-item active flex-1 text-center py-3 font-medium cursor-pointer" data-tab="success">
                成功案例
            </div>
            <div class="tab-item flex-1 text-center py-3 font-medium cursor-pointer" data-tab="works">
                作品展示
            </div>
            <div class="tab-item flex-1 text-center py-3 font-medium cursor-pointer" data-tab="data">
                成绩数据
            </div>
        </div>
    </div>

    <!-- 案例筛选 -->
    <div class="bg-white mt-4 mx-4 rounded-lg shadow-sm p-4">
        <div class="flex items-center">
            <span class="text-gray-600 mr-2">课程类别:</span>
            <select class="flex-1 border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-200">
                <option value="all">全部</option>
                <option value="cleaning">居家保洁</option>
                <option value="elderly">老人护理</option>
                <option value="baby">母婴护理</option>
                <option value="cooking">家庭烹饪</option>
            </select>
        </div>
    </div>

    <!-- 案例列表 -->
    <div class="mx-4 mt-4 mb-20">
        <div class="tab-content active" id="success-content">
            <!-- 案例卡片1 -->
            <div class="bg-white rounded-lg shadow-md overflow-hidden mb-4 card-hover">
                <div class="p-4">
                    <div class="flex items-start">
                        <img src="https://s.coze.cn/image/-zK4GimVgdw/" class="w-16 h-16 rounded-full object-cover mr-3">
                        <div>
                            <h3 class="font-bold text-gray-800">张美丽</h3>
                            <p class="text-sm text-gray-500">居家保洁高级班</p>
                            <div class="flex items-center mt-1">
                                <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">薪资提升60%</span>
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <h4 class="font-medium text-gray-800">从零基础到高级家政师</h4>
                        <p class="text-sm text-gray-500 mt-1">学习周期: 2023.09-2024.03</p>
                        <div class="mt-2 text-sm text-gray-700">
                            <p>通过6个月系统学习，掌握了高级保洁技巧、收纳整理和家电清洁等专业技能...</p>
                            <div class="expand-content">
                                <p class="mt-2">毕业后入职高端家政公司，月薪从3000元提升至4800元，服务客户满意度100%。目前已独立负责5个高端家庭的日常保洁工作，获得客户一致好评。</p>
                            </div>
                            <button class="text-indigo-600 text-sm font-medium mt-2 expand-btn">展开全文 <i class="fas fa-chevron-down text-xs"></i></button>
                        </div>
                    </div>
                    <button class="w-full mt-4 bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition">查看详情</button>
                </div>
            </div>

            <!-- 案例卡片2 -->
            <div class="bg-white rounded-lg shadow-md overflow-hidden mb-4 card-hover">
                <div class="p-4">
                    <div class="flex items-start">
                        <img src="https://s.coze.cn/image/64obmnAvuHE/" class="w-16 h-16 rounded-full object-cover mr-3">
                        <div>
                            <h3 class="font-bold text-gray-800">李芳</h3>
                            <p class="text-sm text-gray-500">母婴护理专业班</p>
                            <div class="flex items-center mt-1">
                                <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">薪资提升75%</span>
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <h4 class="font-medium text-gray-800">从普通保姆到专业育婴师</h4>
                        <p class="text-sm text-gray-500 mt-1">学习周期: 2023.06-2023.12</p>
                        <div class="mt-2 text-sm text-gray-700">
                            <p>系统学习了新生儿护理、母乳喂养指导、辅食添加等专业知识...</p>
                            <div class="expand-content">
                                <p class="mt-2">毕业后获得国家育婴师资格证书，月薪从3500元提升至6000元。现为高端家庭提供专业育婴服务，已成功帮助20+家庭解决育儿难题，获得客户高度认可。</p>
                            </div>
                            <button class="text-indigo-600 text-sm font-medium mt-2 expand-btn">展开全文 <i class="fas fa-chevron-down text-xs"></i></button>
                        </div>
                    </div>
                    <button class="w-full mt-4 bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition">查看详情</button>
                </div>
            </div>

            <!-- 案例卡片3 -->
            <div class="bg-white rounded-lg shadow-md overflow-hidden mb-4 card-hover">
                <div class="p-4">
                    <div class="flex items-start">
                        <img src="https://s.coze.cn/image/dXWL59pdKtQ/" class="w-16 h-16 rounded-full object-cover mr-3">
                        <div>
                            <h3 class="font-bold text-gray-800">王建国</h3>
                            <p class="text-sm text-gray-500">老人护理专业班</p>
                            <div class="flex items-center mt-1">
                                <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">薪资提升50%</span>
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <h4 class="font-medium text-gray-800">从普通护工到专业老年护理师</h4>
                        <p class="text-sm text-gray-500 mt-1">学习周期: 2023.03-2023.09</p>
                        <div class="mt-2 text-sm text-gray-700">
                            <p>学习了老年常见病护理、康复训练、心理疏导等专业技能...</p>
                            <div class="expand-content">
                                <p class="mt-2">毕业后获得老年护理师资格证书，月薪从2800元提升至4200元。现为3位高龄老人提供专业护理服务，帮助老人改善生活质量，获得家属一致好评。</p>
                            </div>
                            <button class="text-indigo-600 text-sm font-medium mt-2 expand-btn">展开全文 <i class="fas fa-chevron-down text-xs"></i></button>
                        </div>
                    </div>
                    <button class="w-full mt-4 bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition">查看详情</button>
                </div>
            </div>
        </div>

        <div class="tab-content hidden" id="works-content">
            <!-- 作品展示内容 -->
            <div class="bg-white rounded-lg shadow-md p-4 text-center">
                <h3 class="text-lg font-bold mb-4">学员作品展示</h3>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <img src="https://s.coze.cn/image/TSHqukq-SVM/" class="w-full h-auto rounded-lg mb-2">
                        <p class="text-sm">收纳整理作品</p>
                    </div>
                    <div>
                        <img src="https://s.coze.cn/image/ALWUSgBTwWA/" class="w-full h-auto rounded-lg mb-2">
                        <p class="text-sm">家庭烹饪作品</p>
                    </div>
                    <div>
                        <img src="https://s.coze.cn/image/qh346HFgJZI/" class="w-full h-auto rounded-lg mb-2">
                        <p class="text-sm">婴儿房布置</p>
                    </div>
                    <div>
                        <img src="https://s.coze.cn/image/vMJcq1ZrVSA/" class="w-full h-auto rounded-lg mb-2">
                        <p class="text-sm">老人康复环境</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-content hidden" id="data-content">
            <!-- 成绩数据内容 -->
            <div class="bg-white rounded-lg shadow-md p-4">
                <h3 class="text-lg font-bold mb-4">学员成绩数据</h3>
                <div class="chart-container" style="height: 250px;">
                    <canvas id="achievementChart"></canvas>
                </div>
                <div class="mt-4 grid grid-cols-2 gap-4">
                    <div class="bg-blue-50 p-3 rounded-lg">
                        <p class="text-sm text-gray-600">理论平均分</p>
                        <p class="text-xl font-bold">86.5</p>
                    </div>
                    <div class="bg-green-50 p-3 rounded-lg">
                        <p class="text-sm text-gray-600">实操平均分</p>
                        <p class="text-xl font-bold">88.2</p>
                    </div>
                    <div class="bg-purple-50 p-3 rounded-lg">
                        <p class="text-sm text-gray-600">证书通过率</p>
                        <p class="text-xl font-bold">92%</p>
                    </div>
                    <div class="bg-indigo-50 p-3 rounded-lg">
                        <p class="text-sm text-gray-600">就业周期</p>
                        <p class="text-xl font-bold">7天</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <!-- <div class="fixed bottom-0 left-0 right-0 bg-white shadow-lg max-w-750 mx-auto flex justify-around py-2 border-t">
        <a href="#" class="flex flex-col items-center text-indigo-600">
            <i class="fas fa-home text-xl"></i>
            <span class="text-xs mt-1">首页</span>
        </a>
        <a href="#" class="flex flex-col items-center text-gray-500">
            <i class="fas fa-graduation-cap text-xl"></i>
            <span class="text-xs mt-1">课程</span>
        </a>
        <a href="#" class="flex flex-col items-center text-gray-500">
            <i class="fas fa-trophy text-xl"></i>
            <span class="text-xs mt-1">学员成果</span>
        </a>
        <a href="#" class="flex flex-col items-center text-gray-500">
            <i class="fas fa-user text-xl"></i>
            <span class="text-xs mt-1">我的</span>
        </a>
    </div> -->

    <script>
        // 轮播Banner逻辑
        let currentSlide = 0;
        const slides = document.querySelectorAll('.banner-slide');
        const dots = document.querySelectorAll('.dot');
        
        function showSlide(n) {
            slides.forEach(slide => slide.classList.remove('active'));
            dots.forEach(dot => dot.classList.remove('active'));
            
            currentSlide = (n + slides.length) % slides.length;
            slides[currentSlide].classList.add('active');
            dots[currentSlide].classList.add('active');
        }
        
        function nextSlide() {
            showSlide(currentSlide + 1);
        }
        
        // 自动轮播
        setInterval(nextSlide, 3000);
        
        // 标签切换逻辑
        const tabItems = document.querySelectorAll('.tab-item');
        const tabContents = document.querySelectorAll('.tab-content');
        
        tabItems.forEach(item => {
            item.addEventListener('click', function() {
                const tabId = this.getAttribute('data-tab');
                
                tabItems.forEach(tab => tab.classList.remove('active'));
                tabContents.forEach(content => content.classList.add('hidden'));
                
                this.classList.add('active');
                document.getElementById(`${tabId}-content`).classList.remove('hidden');
            });
        });
        
        // 展开/收起内容
        const expandBtns = document.querySelectorAll('.expand-btn');
        expandBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const content = this.previousElementSibling;
                content.classList.toggle('expanded');
                
                if (content.classList.contains('expanded')) {
                    this.innerHTML = '收起全文 <i class="fas fa-chevron-up text-xs"></i>';
                } else {
                    this.innerHTML = '展开全文 <i class="fas fa-chevron-down text-xs"></i>';
                }
            });
        });
        
        // 成绩数据图表
        document.addEventListener('DOMContentLoaded', function() {
            const ctx = document.getElementById('achievementChart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['居家保洁', '母婴护理', '老人护理', '家庭烹饪'],
                    datasets: [{
                        label: '理论平均分',
                        data: [85, 88, 84, 89],
                        backgroundColor: 'rgba(99, 102, 241, 0.6)',
                        borderColor: 'rgba(99, 102, 241, 1)',
                        borderWidth: 1
                    }, {
                        label: '实操平均分',
                        data: [87, 90, 86, 89],
                        backgroundColor: 'rgba(79, 70, 229, 0.6)',
                        borderColor: 'rgba(79, 70, 229, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 100,
                            grid: {
                                color: 'rgba(0, 0, 0, 0.05)'
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            position: 'top',
                        }
                    }
                }
            });
        });
    </script>
</body>
</html>